// 基本信息
import BaseMap from "@/components/Map/antvl7/BaseMap";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
// import SelectGagewayList from "@/components/Sansan/SelectGagewayList";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { MarkerDataInfo } from "@/utils/gps";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
import DialogBox from "../../../../../components/DialogBox";
import { generateSn } from "../../../../../utils/util";
import { Search } from "@element-plus/icons-vue";
import "./basicDialog.scss";
import { getDeviceListAll, getProtocolList } from "@/api/modules/iot/device";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			sn: [{ required: true, message: "请输入设备SN", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					if (!props.detail.name) {
						props.detail.name = props.detail.sn;
					}
					emit("submit");
				}
			});
		};
		onMounted(() => {
			initProtocol();
		});
		const visible = ref(false);
		const protocol = ref({ search: "", list: [] });
		const device = ref<any>({ search: "", list: [] });
		const initProtocol = async () => {
			protocol.value.list = [];
			let { result } = await getProtocolList({ label: protocol.value.search });
			protocol.value.list = result;
		};
		const initDevice = async code => {
			device.value.list = [];
			if (!code) return;
			let { result } = await getDeviceListAll({ sn: protocol.value.search, typeNot: "device", productModel: code });
			device.value.list = result;
		};
		return () => {
			return (
				<DialogBox {...attrs} width={props.detail.id ? "500px" : "980px"} title={props.title} onConfirm={() => validData()}>
					<div class="flex basicDialog" style="height:500px">
						<div class="flex-1 ">
							{props.detail.id ? "" : <div class="text-center font-bold mb-6">基本信息</div>}
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="70">
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.sn")} prop="sn">
									{props.detail.id ? (
										<el-input v-model={props.detail.sn} disabled></el-input>
									) : (
										<el-input v-model={props.detail.sn}>
											{{
												append: () => {
													return (
														<el-button type="primary" link onClick={() => (props.detail.sn = generateSn())}>
															<span class="text-sm p-1 pr-1">{proxy?.$t("device_basicdialog.btn.automatically")}</span>
														</el-button>
													);
												}
											}}
										</el-input>
									)}
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								{/* <el-form-item label={proxy?.$t("device_basicdialog.form_label.gatewaySn")} prop="gatewaySn">
									<SelectGagewayList detail={props.detail} />
								</el-form-item> */}
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.deptId")} prop="deptId">
									<SelectDeptList detail={props.detail} initDefault={!props.detail.deptId} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.productModel")} prop="productModel">
									<SelectProductList detail={props.detail} v-model={props.detail.productModel} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.address")} prop="address">
									<el-input
										onClick={() => {
											visible.value = true;
										}}
										placeholder={proxy?.$t("device_basicdialog.address.default")}
										value={props.detail.location?.address}
									/>
								</el-form-item>
							</el-form>
						</div>
						{props.detail.id ? (
							""
						) : (
							<>
								<el-divider direction="vertical" class="h-full mr-5 ml-5" />
								<div class="flex-1">
									<div class="text-center font-bold mb-6">协议驱动</div>
									<el-input v-model={protocol.value.search} suffix-icon={Search} onChange={initProtocol} />
									<div class="border mt-2">
										<el-table
											height="400px"
											highlight-current-row
											data={protocol.value.list}
											onCurrentChange={e => {
												props.detail.protocol = e.value;
												initDevice(e.gateProduct);
											}}
										>
											<el-table-column prop="label" label="协议名称" />
										</el-table>
									</div>
								</div>
								<el-divider direction="vertical" class="h-full mr-5 ml-5" />
								<div class="flex-1">
									<div class="text-center font-bold mb-6">接入网关</div>
									<el-input v-model={device.value.search} suffix-icon={Search} onChange={initDevice} />
									<div class="border mt-2">
										<el-table
											height="400px"
											highlight-current-row
											data={device.value.list}
											onCurrentChange={e => {
												props.detail.gatewaySn = e.sn;
											}}
										>
											<el-table-column prop="onlineStatus" label="状态">
												{{
													default: (scope: any) => {
														return <OnlineStatus v-model={scope.row.onlineStatus} />;
													}
												}}
											</el-table-column>
											<el-table-column prop="name" label="网关名称" />
											<el-table-column prop="sn" label="SN" />
										</el-table>
									</div>
								</div>
							</>
						)}

						{attrs.visible ? (
							<DialogBox v-model:visible={visible.value} hideFooter width="580px" title="位置信息">
								<BaseMap
									style="height:500px"
									editerMarker
									detail={props.detail as MarkerDataInfo}
									onLocation={location => (props.detail.location = location)}
								/>
							</DialogBox>
						) : null}
					</div>
				</DialogBox>
			);
		};
	}
});
